<template>
  <div class="share">
    <!-- 海报html元素 -->
    <div id="posterHtml">
      <div>{{posterContent}}</div>
      <!-- 二维码 -->
      <div class="qrcode"><div id="qrcodeImg"></div></div>
    </div>
  </div>
</template>
<script>
  import QRCode from 'qrcodejs2'
  import html2canvas from 'html2canvas'
    export default {
      data() {
        return {
          posterContent: 'ceshicehishiceshi', // 文案内容
          posterHtmlBg: require('../assets/img/remind.png'), // 背景图
          posterImg: '', // 最终生成的海报图片
        }
      },
      methods:{
        createPoster() {
          // 生成海报
          const vm = this
          const domObj = document.getElementById('posterHtml')
          html2canvas(domObj, {
            useCORS: true,
            allowTaint: false,
            logging: false,
            letterRendering: true,
            onclone(doc) {
              let e = doc.querySelector('#posterHtml')
              e.style.display = 'block'
            }
          }).then(function(canvas) {
            // 在微信里,可长按保存或转发
            vm.posterImg = canvas.toDataURL('image/png')
          })
        },
      }
    }
</script>

<style lang="stylus" scoped>
  .share{
    #posterHtml{
      height 603px
      background url(../assets/img/timg.jpeg) no-repeat top center
      background-size cover
    }
  }
</style>
